<template>
  <el-form :model="formData" :label-width="width" ref="form1">
    <el-form-item
      v-for="(item, index) in formConfig"
      :key="index"
      :prop="item.field"
      :label="item.label"
      :label-width="item.width"
      :rules="item.rules"
    >
      <el-input
        type="text"
        v-model="formData[item.field]"
        v-if="item.type == 'text'"
      ></el-input>

      <el-input
        type="password"
        v-model="formData[item.field]"
        v-if="item.type == 'password'"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        v-for="(item, index) in formBtns"
        :key="index"
        :type="item.type"
        @click="submitFn(item.content)"
        >{{ item.content }}</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "0px",
    },
    formConfig: {
      requird: true,
      type: Array,
    },
    formBtns: {
      required: true,
      type: Array,
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    submitFn(content) {
      if (content == "重置") {
        this.$refs.form1.resetFields();
      } else {
        this.$refs.form1.validate((isSuccess) => {
          if (isSuccess) {
            this.$emit("submit", this.formData);
          }
        });
      }
    },
  },
};
</script>

<style></style>
